<template>
<div class="content">
  <p>请选择保险类型：</p>

  <input type="radio" name="insurance" value="dreaddisease" v-model="ins">重疾险
  <input type="radio" name="insurance" value="health" v-model="ins">健康险
  <input type="radio" name="insurance" value="property" v-model="ins">财产险

  <hr />

  <div v-if = "ins === 'dreaddisease'">
    <p>请选择性别：</p>
    <select v-model="gender">
      <option disabled value="">请选择</option>
      <option>boy</option>
      <option>girl</option>
    </select>
  </div>

  <div v-else-if = "ins === 'health'">
    <p>请输入年龄：</p>
    <input type="text" name="age" v-model="age">
    <br><br>
    <input type="submit" value="提交" @click="calcu">
  </div>

  <div v-else-if = "ins === 'property'">
    <p>请输入资产价值：</p>
    <input type="text" name="proper" v-model="proper">
  </div>

  <hr />

  <p>保费为{{amount}}元</p>

</div>
</template>

<script>
export default {
  data() {
    return {
      ins : "",
      gender : "",
      amount : 0,
      age : 0,
      proper : 0
    }
  },
  methods:{
    calcu(){
      fetch('http://localhost:8080/health-insurance', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({"age" :  `${this.age}` }),
      })
      .then(
        (data) => {
          data.json().then(
            res=>{

                 this.amount = res.totalAmount

            }
          )
        }
      )      
    }
  },
  watch:{
    gender(value){
      fetch('http://localhost:8080/dread-disease-insurance', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({"gender" :  `${value}` }),
      })
      .then(
        (data) => {
          data.json().then(
            res=>{this.amount = res.totalAmount}
          )
        }
      )
    },
    // age(value){
    //   fetch('http://localhost:8080/health-insurance', {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({"age" :  `${value}` }),
    //   })
    //   .then(
    //     (data) => {
    //       data.json().then(
    //         res=>{this.amount = res.totalAmount}
    //       )
    //     }
    //   )      
    // },
    proper(value){
      fetch('http://localhost:8080/property-insurance', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({"value" :  `${value}` }),
      })
      .then(
        (data) => {
          data.json().then(
            res=>{this.amount = res.totalAmount}
          )
        }
      )
    }
  }
}
</script>


<style>
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #eee;
}

.content {
  width: 960px;
  height: 100%;
  margin: 0 auto;
  padding-top: 20px;
}

.content h1 {
  color: #ff1a00;
  text-align: center;
}
</style>
